<template>
  <div ref="container" class="cesium-container"></div>
</template>

<script setup>
  import { onMounted, ref } from 'vue'
  import * as Cesium from 'cesium'
  import 'cesium/Build/Cesium/Widgets/widgets.css'

  const container = ref()
  let viewer,
    tileset,
    cameraEntities = []

  onMounted(async () => {
    viewer = new Cesium.Viewer(container.value, {
      terrainProvider: Cesium.Terrain.fromWorldTerrain(),
      animation: false,
      timeline: false,
      baseLayerPicker: false
    })

    viewer.scene.globe.enableLighting = true

    await loadTileset()
    loadCameras()
  })

  async function loadTileset() {
    // 直接用公开 URL 加载 3D Tiles 模型，免 Token
    const tilesetUrl = 'https://beta.cesium.com/api/assets/1461/tileset.json'
    tileset = await Cesium.Cesium3DTileset.fromUrl(tilesetUrl)
    viewer.scene.primitives.add(tileset)
    viewer.zoomTo(tileset)
  }

  function loadCameras() {
    const cameraPositions = [
      [116.3913, 39.9075, 20],
      [116.3925, 39.9078, 20],
      [116.3935, 39.908, 20]
    ]
    cameraEntities = cameraPositions.map((pos, index) =>
      viewer.entities.add({
        position: Cesium.Cartesian3.fromDegrees(...pos),
        billboard: {
          image: '/icons/camera.png',
          width: 32,
          height: 32
        },
        label: {
          text: `摄像头 #${index + 1}`,
          font: '14px sans-serif',
          fillColor: Cesium.Color.CYAN,
          verticalOrigin: Cesium.VerticalOrigin.TOP
        }
      })
    )
  }
</script>

<style scoped>
  .cesium-container {
    width: 100%;
    height: 100%;
  }
</style>
